.spaceMoveWrap {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  .g-container {
    background: #000;
    overflow: hidden;
    width: 100vw;
    height: 100vw;
    position: relative;
    perspective: 4px;
    perspective-origin: 50% 50%;
  }
  .g-group {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    // transform: rotateX(30deg) rotateY(30deg);
    animation: move 12s infinite linear;
  }
  // 设置负的 animation-delay，让第二组动画提前进行
  .g-group:nth-child(2) {
    animation: move 12s infinite linear;
    animation-delay: -6s;
  }
  .item {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(https://z3.ax1x.com/2021/08/20/fLwuMd.jpg);
  }
  .item-right {
    // background: red;
    transform: rotateY(90deg) translateZ(50px);
  }
  .item-left {
    // background: green;
    transform: rotateY(-90deg) translateZ(50px);
  }
  .item-top {
    // background: blue;
    transform: rotateX(90deg) translateZ(50px);
  }
  .item-bottom {
    // background: deeppink;
    transform: rotateX(-90deg) translateZ(50px);
  }
  .item-middle {
    // background: gray;
    transform: rotateX(180deg) translateZ(50px);
  }
  @keyframes move {
    0% {
      transform: translateZ(-50px) rotate(0deg);
    }
    100% {
      transform: translateZ(50px) rotate(0deg);
    }
  }
}
